<template>
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div class="login-box" id="_j_login_box" v-show="displayed">
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" action="javascript:;">
                  <div class="form-field">
                    <input
                      id="inputPassword"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      v-model="phoneNumber"
                    />
                    <div
                      class="err-tip"
                      :style="{
                        display: errTip !== '' ? 'block' : 'none',
                      }"
                    >
                      {{ errTip }}
                    </div>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" @click="checkPhone">
                      立即注册
                    </button>
                  </div>
                </form>
                <div class="agreement">
                  注册视为同意<a target="_blank" href="javascript:;"
                    >《骡窝窝用户使用协议》</a
                  >
                </div>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
          </div>
          <div class="signup-box" v-show="!displayed">
            <div class="add-info">
              <div class="hd">账号注册</div>
              <form method="post" id="editForm">
                <input type="hidden" name="phone" value="" id="phone" />
                <div class="form-field m-t-10">
                  <input
                    name="nickname"
                    type="text"
                    placeholder="您的昵称"
                    v-model="nickname"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="password"
                    type="password"
                    placeholder="您的密码"
                    v-model="password"
                  />
                  <div class="err-tip">{{ pasErrTip }}</div>
                </div>
                <div class="form-field">
                  <input
                    name="rpassword"
                    type="password"
                    placeholder="确认密码"
                    v-model="rpassword"
                  />
                  <div class="err-tip">{{ pasErrTip }}</div>
                </div>

                <div class="form-field">
                  <div class="clearfix">
                    <a href="javascript:;" class="vcode-send sms-code-send"
                      >获取验证码</a
                    >
                    <input
                      name="verifyCode"
                      type="text"
                      placeholder="短信验证码"
                      autocomplete="off"
                      class="vcode-input"
                      v-model="verifyCode"
                    />
                  </div>
                  <div class="err-tip clearfix"></div>
                </div>
                <div class="submit-btn">
                  <button type="button" @click="registFn">完成注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullscreen-bg"></div>
  </div>
</template>

<script>
import { validatePhoneNumber } from "../utils";
import { RegistApi, checkPhoneApi } from "@/request/api";
export default {
  data() {
    return {
      displayed: true,
      errTip: "",
      pasErrTip: "",
      phoneNumber: "",
      nickname: "",
      password: "",
      rpassword: "",
      verifyCode: "",
    };
  },

  methods: {
    async checkPhone() {
      if (validatePhoneNumber(this.phoneNumber)) {
        let res = await checkPhoneApi({
          phone: this.phoneNumber,
        });
        // console.log(res);
        if (!res.data) {
          this.errTip = "手机号已注册";
          return;
        }
        this.displayed = !res.data;
        console.log(this.phoneNumber);
      } else {
        // console.log(1223);
        this.errTip = "手机号码格式不正确";
        return;
      }
    },
    async registFn() {
      if (this.password !== this.rpassword) {
        this.pasErrTip = "密码不一致";
        return;
      }
      console.log(this.phoneNumber);
      let res = await RegistApi({
        phone: this.phoneNumber,
        nickname: this.nickname,
        password: this.password,
        rpassword: this.rpassword,
        verifyCode: this.verifyCode,
      });
      console.log(res.code);
      console.log(res.msg);
      this.$router.push("/login");
      // if (res.code === 200) {
      //   this.$router.push("/login");
      // }
      return true;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/regist.css";
</style>
